<template>
  <div id="app">
    <el-container style="text-align: center">
      <el-header>
        <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect" router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">学生信息管理</template>
            <el-menu-item index="/StudentComponent">学生信息</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">选课信息管理</template>
            <el-menu-item index="/ScComponent">选课信息</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">课程信息管理</template>
            <el-menu-item index="/CourseComponent">课程信息</el-menu-item>
          </el-submenu>
          <el-menu-item index="/SettingComponent">设置中心</el-menu-item>
          <div style="margin-top: 1%; margin-right: 5%; float: right">
            <el-dropdown  @command="handleCommand">
              <el-button type="text" style="color: #000000;">
                {{ userName }} <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="/LoginComponent">登录</el-dropdown-item>
                <el-dropdown-item>学生注册</el-dropdown-item>
                <el-dropdown-item>教师注册</el-dropdown-item>
                <el-dropdown-item>管理员注册</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view style="margin:0 auto"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      userName: '李白'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    handleCommand (command) {
      console.log('command :' + command)
      this.$router.replace(command)
    }
  },
  computed: mapState({
    appActive: 'appActive'
  })
}
</script>

<style>
#app {
  margin: 0;
  height: 100%;
}
</style>
